<template>
    <mu-list>
        <div v-if="message != '' && courses.length == 0 " style="text-align: center; padding: 10px;">
            <!--<mu-circular-progress v-if="refresh==true" :size="40"/>-->
            <div>
                {{ message }}
            </div>
        </div>
        <mu-list-item v-if="courses.length > 0" class="course-items" v-for="(course,i) in courses" :key="i"
                      :to="{ name: 'Course', params: { id: course.kcid, title:course.kcmc }}" >
            <div class="course-list">
                <div class="course-img">
                    <img :src="course.kcfm" />
                </div>
                <div class="index-course-info">
                    <div class="course-info-title">
                        {{ course.kcmc }}
                    </div>
                    <mu-row gutter class="info-info">
                        <mu-col class="info-left" width="50" tablet="50" desktop="50">
                            {{ course.kcjs }}
                        </mu-col>
                        <mu-col class="info-right" width="50" tablet="50" desktop="50">
                            {{ course.zw }}
                        </mu-col>
                    </mu-row>
                    <mu-row gutter class="info-info">
                        <mu-col class="info-left" width="50" tablet="50" desktop="50">
                            <mu-icon value="star" :size="16" style="color: red;" v-for="i in parseInt(course.kcpj)" :key="i"  />
                        </mu-col>
                        <mu-col class="info-right" width="50" tablet="50" desktop="50">
                            {{ course.kcrs }}  人学习
                        </mu-col>
                    </mu-row>
                </div>
            </div>
        </mu-list-item>
    </mu-list>
</template>

<script>
  export default {
    name: 'CourseList',
    computed:{
      message(){
        return this.$store.state.message;
      }
    },
    props:['courses','refresh']
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
    .mu-item{ padding:10px;}
    .course-list {
        /*margin-top: 0.8rem;*/
        width: 100%;
        clear: both;
        height: 6.5rem;
    }
    .course-img {
        display: inline-block;
        background: red;
        width: 11rem;
        float: left;
    }
    .course-img img {
        width: 100%;
    }
    .index-course-info {
        padding: 0 0.8rem;
        margin-left: 11rem;
        overflow: hidden;
    }
    .course-info-title {
        height: 2.7rem;
        font-size: 0.9rem;
        overflow: hidden;
        text-overflow: ellipsis;
        line-height: 1.4rem;
        margin-bottom: 0.9rem;
    }
    .info-info {
        font-size: 12px;
        color: #777;
        height: 1.6rem;
    }
    .info-info .col {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
</style>
